<template>
	<div class="container1">
		<!-- 协议勾选部分 -->
		<div class="agreement-box">
			<!-- <view class="protocol acea-row row-between-wrapper">
				<checkbox-group class="checkgroup acea-row" @change='isAgree=!isAgree' style="align-items: end;">
					<checkbox class="checkbox" :checked="isAgree ? true : false" />
				</checkbox-group>
			</view> -->
			<image src="/static/blind/xz.png" class="imgbox"></image>
			<view for="agreement">
				我已阅读并同意
				<text class="protocol_text">我已阅读并同意<text @click="userAgree" class="font_pro">《用户协议》</text></text>
			</view>
		</div>

		<!-- 提示信息 -->
		<div class="error-tip" v-show="showError && !agree">
			请先阅读并同意协议
		</div>
		<!-- 协议弹窗 -->
		<!-- <div class="agreement-modal" v-if="isShowAgreement">
			<div class="modal-content">
				<h3>用户协议</h3>
				<div class="agreement-text">
					<p>这里是详细的协议内容...</p>
				</div>
				<button @click="isShowAgreement = false">关闭</button>
			</div>
		</div> -->
	</div>
</template>

<script>
	export default {
		data() {
			return {
				agree: true, // 是否同意协议
				showError: false, // 是否显示错误提示
				isShowAgreement: false, // 是否显示协议弹窗
				isAgree: false
			};
		},
		methods: {
			handleSubmit() {
				if (!this.agree) {
					this.showError = true;
					return;
				}
				// 这里处理提交逻辑
				console.log('表单提交...');
			},
			oncheck(e) {
				this.$emit('onagree', e.detail.value[0]);
				console.log(e.detail.value[0], "e")
			}
		}
	};
</script>

<style scoped>
	.container1 {
		/* max-width: 600px;
  margin: 20px auto; */
		/* padding: 20px; */
	}

	.agreement-box {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}

	.agreement {
		position: relative;
		/* top: -10px;
		left: 10px; */
	}

	.agreement-box image {
		margin-right: 8px;
		width: 25px;
		height: 25px;
	}

	.error-tip {
		color: red;
		font-size: 12px;
		margin-bottom: 10px;
	}

	.submit-btn {
		padding: 8px 20px;
		background: #409eff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}

	.submit-btn:disabled {
		background: #c0c4cc;
		cursor: not-allowed;
	}

	.agreement-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.modal-content {
		background: white;
		padding: 20px;
		border-radius: 4px;
		max-width: 80%;
		max-height: 80vh;
		overflow-y: auto;
	}
</style>